<extend name="Base/common"/>

<block name="header">
    <header class="jumbotron subhead" id="overview">
        <div class="container">
            <h2>源自相同起点，演绎不同精彩！</h2>
            <p class="lead"></p>
        </div>
    </header>
</block>

<block name="side">
<!-- 左侧 nav
================================================== -->
    <!--<div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav">
            {:W('Category/lists', array(39, true))}
        </ul>
    </div>-->
</block>

<block name="body">
    <div class="span9">
    </div>
    <div id="search_div">
        <div class="search_content">
            <div class="search_box">
                <input type="search" class="search_input" placeholder="请输入搜索内容,以便查询设备的维修信息！" value=""/>
            </div>
            <div class="search_select">
                <span data=""><a href="javascript:;" value="1">手机号码</a></span>
                <ul class="dropdown">
                    <li><a href="javascript:;" value="1">手机号码</a></li>
                    <li><a href="javascript:;" value="2">客户姓名</a></li>
                </ul>
            </div>
            <a href="javascript:;" class="search_btn">搜索</a>
        </div>
    </div>
    <div style="width: 100%;padding: 20px 20%;box-sizing: border-box;">
        <table class="table_info" width="100%" border="1">

        </table>
    </div>
    <script type="text/javascript">
        window.onload = function() {
            function DropDown(el) {
                this.dd = el;
                this.span = this.dd.children('span');
                this.li = this.dd.find('ul.dropdown li');
                this.val = '';
            }
            DropDown.prototype.initEvents = function() {
                var obj = this;
                obj.dd.on('click', function(event) {
                    $(this).toggleClass('active').siblings().removeClass('active');
                    event.stopPropagation();
                });
                obj.li.on('click', function() {
                    var opt = $(this);
                    obj.val = opt.html();
                    if(obj.span.html() == obj.val) return;
                    obj.span.html(obj.val);
                    $(document).click(function() {
                        $('.search_select').removeClass('active');
                    });
                })
            }
            var select = new DropDown($('.search_select'));
            select.initEvents();
        }
    </script>
    <script type="text/javascript">
        $("#search_select li").find("a").each(function(){
            $(this).click(function(){
                var text = $(this).text();
                $("#search_select span").text(text).attr("data",$(this).attr("value"));
                $("#dropdown").addClass("hidden");
            })
        });
    </script>
    <script type="text/javascript">
        $(".search_btn").click(function(){
            var info = $(".search_input").val();
            var search_select = $(".search_select a").attr('value');
            $.ajax({
                url:"{:U('Order/getRepairInfo')}",
                type:"POST",
                data:{info:info,search_select:search_select},
                dataType:"json",
                success: function(result){
                    $(".table_info tr").remove();
                    var text = '';
                    if(result){
                        text += '<tr><th>客户姓名</th>';
                        text += '<th>'+result[0].customer+'</th></tr>';
                        text += '<tr><th>设备型号</th>';
                        text += '<th>'+result[0].repair_model+'</th></tr>';
                        text += '<tr><th>维修进程</th>';
                        text += '<th>'+result[0].repair_status+'</th></tr>';
                        text += '<tr><th>维修价格</th>';
                        text += '<th>'+result[0].repair_price+'</th></tr>';
                        text += '<tr><th>已付定金</th>';
                        text += '<th>'+result[0].repair_handsel+'</th></tr>';
                        text += '<tr><th>到店应付</th>';
                        text += '<th>'+(result[0].repair_price - result[0].repair_handsel)+'</th></tr>';
                    }else{
                        text = '<tr style="text-align: center;"><th>暂无维修设备信息！</th></tr>';
                    }
                    $(".table_info").append(text);
                },
                fail: function(){
                    console.log('信息接收失败！');
                }
            });
        });
    </script>
</block>